<template>
  <div class="comment-item">
    <div class="author">
      <img :src="comment.avatar" alt="">
      <span class="name">{{ comment.username }}</span>
    </div>
    <div class="comment-text">
      <div class="text">
        {{ comment.content }}
      </div>
      <div class="date-reply">
        <span class="date">{{ comment.createTime }}</span>
        <span class="reply" @click="toReply(comment)">回复</span>
      </div>
      <div class="son-comment" v-if="comment.commentUserList && comment.commentUserList.length > 0">
        <CommentItem v-for="childComment in comment.commentUserList" :key="childComment.id" :comment="childComment">
        </CommentItem>
      </div>
      <div class="reply-box" v-if="comment.replyBox">
        <div class="input">
          <img src="@/assets/comment.avif" alt="">
          <input type="text" :placeholder="replyPlaceholder" style="width:330px;" v-model="item.replyText">
          <button @click="sendText(comment)">发布</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'commentItem',
  props: {
    comment: Object
  },
  data() {
    return {
      // 路由跳转的文件id
      fileId: 0,
      // 评论的文本内容
      content: '',
      // 文件的评论列表
      commentList: [],
      // 回复框的值
      replyPlaceholder: "",
      // 回复的id
      replyId: 0,

    }
  },
  computed: {
    // imgPath(){
    //   // const fileType = this.commentItem.fileType
    //   const fileNames=['','video','mp3','img','pdf','word','excel','txt','code','zip','ppt','folder'];
    //   const imgName = fileNames[fileType];
    //   return require(`@/common/image/${imgName}.png`)
    // }
  },
  methods: {
    toReply(item) {
      this.commentList.forEach(i => {
        i.replyBox = false
      })
      this.replyId = 0
      item.replyBox = true
      this.replyPlaceholder = '回复 @' + item.username
    },

    sendText(item) {
      // console.log(item.id)
      // console.log(item.replyText)
      if (this.replyId == 0) {
        this.postReply(item.id, item.replyText)
      } else {
        this.postReply(this.replyId, item.replyText)
      }
      item.replyBox = false
      this.getCommentList(item.fileId)

    },

  }
}
</script>

<style  scoped>
.comment {
  /* background: #ccc; */
  margin: 20px 30px;
}

.doc img {
  width: 40px;
  vertical-align: middle;
}

.doc span {
  vertical-align: middle;
}

.title {
  margin-top: 20px;
}

.title span:nth-child(1) {
  font-size: 20px;
  vertical-align: middle;

}

.title span:nth-child(2) {
  font-size: 14px;
  padding: 10px;
  color: #9499A0;
  vertical-align: middle;
}

.input {
  margin: 20px 15px;
}

.input img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 20px;
}

.input input,
button {
  border: 1px solid #fff;
  background: rgb(241, 242, 243);
  border-radius: 5px;
  font-size: 13px;
  color: #9499A0;
  font-weight: 500;
  vertical-align: middle;
}

.input input:hover,
input:focus {
  border: 1px solid #ccc;
  background: #fff;
  outline: none;
}

.input input {
  width: 400px;
  padding: 15px 10px;
}

.input button {
  background: rgb(127, 214, 245);
  color: #fff;
  font-size: 14px;
  margin-left: 10px;
  padding: 12px 20px;
}

.input button:hover {
  background: rgb(0, 174, 236);
}

.content {
  margin-left: 15px;
  margin-top: 30px;
}

.author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  object-fit: cover;
  /* 图片按比例缩放并裁剪以填满容器 */
  object-position: center;
  /* 图片在容器中居中显示 */
}

.name {
  color: #61666d;
  margin: 0px 15px;
  font-size: 14px;
  vertical-align: middle;
}

.idtify {
  background: rgb(255, 102, 153);
  color: #fff;
  padding: 2px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  height: 10px;
  line-height: 6px;
  border-radius: 3px;
}

.comment-text {
  margin-left: 55px;
}

.text {
  margin-top: 5px;
  color: #18191C;
}

.date-reply {
  color: #9499A0;
  margin-top: 5px;
  font-size: 14px;
}

.son-date {
  margin-left: 40px;
}

.reply {
  margin-left: 15px;

}

.reply:hover {
  color: rgb(0, 174, 236);
  cursor: pointer;
}

.son-comment {
  margin-top: 10px;
}

.reply-comment {
  margin-top: 10px;
}

.head img,
.reply-comment img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
}

.son-text {
  vertical-align: middle;
}

.reply-comment span:nth-child(4) {
  color: #008AC5;
  cursor: pointer;
}

.more {
  color: #61666d;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}
</style>

